<template>
	<view>
		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
		 v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view class="u-padding-50">
				<view class="pay-title">请输入资金密码</view>
				<template v-if="price != 0">
					<view class="u-text-center pay-title-pay">支付</view>
					<view class="u-text-center money d-flex">
						<!-- <image src='https://postrings.oss-accelerate.aliyuncs.com/images/usdt.png' class="cricel-img" mode="aspectFill"></image> -->
						<span>{{accMul(count,price)}}</span>
					</view>
				</template>
				<template v-else>
					<view class="u-padding-20"></view>
				</template>
				<view class="u-padding-10 close" data-flag="false" @tap="showPop">
					<u-icon name="close" color="#7B809A" size="45"></u-icon>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" active-color="#1EF7FE" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
				</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		props: {
			// 通过双向绑定控制键盘的弹出与收起
			show: {
				type: Boolean,
				default: false
			},
			//需要支付的货币名称
			name:{
				type: String,
				default: 'PPT'
			},
			//需要支付的价格
			price:{
				type: [Number, String],
				default: 0
			},
			//需要支付的数量
			count:{
				type: [Number, String],
				default: 1
			}
		},
		data() {
			return {
				nowShow:false,
				password: ''
			}
		},
		watch:{
			show(val){
				this.password = ''
			}
		},
		methods: {
			//消除计算浮点
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.$emit('finish',this.password)
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			showPop() {
				this.password = '';
				this.$emit('payKeyClose',false)
			},
			finish() {
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-drawer-content{
		border-radius: 24upx 24upx 0 0 !important;
	}
	.pay-title{
		color: #333333;
		font-size: 32upx;
		text-align: center;
		margin-bottom: 40upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
	}
	
	.pay-title-pay{
		color: #9099A1;
		font-size: 28upx;
		margin-bottom: 6upx;
	}
	.close {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		line-height: 28rpx;
	}
	.money {
		color: $u-type-warning;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: baseline;
		margin-bottom: 45upx;
		image{
			width: 48upx;
			height: 48upx;
			margin-right: 10upx;
		}
		span{
			color: #343A40;
			font-size: 66upx;
			font-weight: 600;
			font-family: PingFang-SC-Medium, PingFang-SC;
		}
	}
	
	.tips {
		color: $u-tips-color;
	}
</style>
